<template>
  <div>
    <label style="font-size: 30px; margin-left: 45%">文明学习</label>
      <div v-for="(list,index) in lists" :key="index">
        <div>
          {{index + 1}}.
          <label>{{list.title}}</label>
          <label v-if="list.type==1">(基本常识)</label>
          <label v-if="list.type==2">(安全学习)</label>
          <label v-if="list.type==3">(卫生学习)</label>
          <label v-if="list.type==4">(法律法规)</label>
          <div>
             <el-radio-group v-model="radio[index]">
            <el-radio  value="对" :label="1">对</el-radio>
            <el-radio  value="错" :label="2">错</el-radio>
            </el-radio-group>
            <label v-if="msg[index]==1"><font color="green">正确</font></label>
            <label v-if="msg[index]==2"><font color="red">错误</font></label>
           <label v-if="ishow">答案：{{list.answer}}</label>
          </div>
        </div>
      </div>
       <div v-for="(list,index) in studies1" :key="index">
        <div>
          {{index + 1}}.
          <label>{{list.questionBank.title}}</label>
          <label v-if="list.questionBank.type==1">(基本常识)</label>
          <label v-if="list.questionBank.type==2">(安全学习)</label>
          <label v-if="list.questionBank.type==3">(卫生学习)</label>
          <label v-if="list.questionBank.type==4">(法律法规)</label>
          <div>
            <label>我的选项：{{list.myoption}}</label><br/>
            <label>正确答案：{{list.questionBank.answer}}</label><br/>
          </div>
        </div>
      </div>
       <el-button type="primary" @click="addStudyAndIsTrue()">提交答案</el-button>
        <el-button type="primary" @click="getQuestion()">换一批题</el-button>
        <el-button type="primary" @click="getStudyHistory()">历史记录</el-button>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      justice:"",
      lists: [],
      radio: [],
      studies:[],
      studies1:[],
      msg: [],
      ishow: false,
      user: this.$store.state.person,
    };
  },
  methods: {
    getQuestion(){
      this.studies=[]
      this.studies1=[]
      axios.get("http://localhost:9091/questionBank/getQuestion").then(res => {
        if(res.data.code == 400){
          this.$message({
              type: "err",
              message:res.data.message
              });  
        }
         if(res.data.code == 200){
          this.$message({
              type: "success",
              message:res.data.message
              });  
            this.lists = res.data.data
            this.radio=[]
            this.msg=[],
            this.ishow=false
        }
      });
    
    },
    addStudyAndIsTrue(){
      if(!this.ishow){
      for(let i = 0;i < this.lists.length;i++){
        var study = {id:0,myoption:'',questionBank:null};
        study.questionBank = this.lists[i]
       if(this.radio[i] == 1){
        study.myoption = "对"
       }else if(this.radio[i] == 2){
        study.myoption = "错"
       }else{
         study.myoption = "空"
       }
       study.user=this.user
       this.studies[i]=study
      }
      axios.post("http://localhost:9091/study/addStudyAndIsTrue",JSON.stringify(this.studies),{
        headers: {
           'Content-Type': 'application/json;charset=UTF-8'
        } 
      }).then(res => {
        if(res.data.code == 200){
          this.$message({
              type: "success",
              message:res.data.message
          });  
         this.msg=res.data.data
         this.ishow=true
        }
      });
    }
    },
    getStudyHistory(){
      this.lists=[]
      axios.get("http://localhost:9091/study/getStudyByU_id?u_id=" + this.user.id).then(res => {
        if(res.data.code == 200){
          this.studies1=res.data.data
        }
      });
    }
  },
  mounted() {
    this.getQuestion()
  },
  computed: {},
};
</script>
<style scoped></style>
